<template>
	<section class="todoapp">
		<header class="header">
			<h1>todos</h1>
			<input
				class="new-todo"
				autofocus=""
				autocomplete="off"
				placeholder="What needs to be done?"
				@keyup.enter="addTodo"
				v-model="todoTitleRef"
			/>
		</header>
		<section class="main" v-show="todoListRef.length > 0">
			<input
				id="toggle-all"
				class="toggle-all"
				type="checkbox"
				v-model="isAllDoneRef"
			/>
			<label for="toggle-all">Mark all as complete</label>
			<transition-group tag="ul" name="todos" class="todo-list">
				<li
					class="todo"
					:class="{
						completed: item.isFinish,
						editing: editingTodoRef === item,
					}"
					v-for="item in filterTodosRef"
					:key="item.id"
				>
					<div class="view">
						<input class="toggle" type="checkbox" v-model="item.isFinish" />
						<label @dblclick="edit(item)">{{ item.title }}</label>
						<button class="destroy" @click="deleteTodo(item)"></button>
					</div>
					<input
						class="edit"
						type="text"
						v-model="item.title"
						@blur="doneEdit"
						@keyup.enter="doneEdit"
						@keyup.esc="cancelEdit"
						@mouseenter="autoFocus($event.target)"
					/>
				</li>
			</transition-group>
		</section>
		<footer class="footer" v-show="todoListRef.length > 0">
			<span class="todo-count">
				<strong>{{ pendingTodosRef.length }}</strong>
				<span>thing{{ pendingTodosRef.length === 1 ? "" : "s" }} to do</span>
			</span>
			<ul class="filters">
				<li>
					<a
						href="#/all"
						:class="{
							selected: optionRef === 'all',
						}"
						>All</a
					>
				</li>
				<li>
					<a
						href="#/active"
						:class="{
							selected: optionRef === 'active',
						}"
						>Active</a
					>
				</li>
				<li>
					<a
						href="#/completed"
						:class="{
							selected: optionRef === 'completed',
						}"
						>Completed</a
					>
				</li>
			</ul>
			<button
				class="clear-completed"
				@click="deleteCompleted"
				v-show="completedTodosRef.length > 0"
			>
				Clear completed
			</button>
		</footer>
	</section>
</template>

<script>
import useTodoList from "./compositions/useTodoList.js";
import useAddTodo from "./compositions/useAddTodo.js";
import useFilter from "./compositions/useFilter.js";
import useEditTodo from "./compositions/useEditTodo.js";
import useDeleteTodo from "./compositions/useDeleteTodo.js";
export default {
	name: "App",
	setup() {
		// 这个函数是在组件实例化的时候调用的，只会运行一次
		let { todoListRef } = useTodoList();
		return {
			todoListRef,
			...useAddTodo(todoListRef),
			...useFilter(todoListRef),
			...useEditTodo(todoListRef),
			...useDeleteTodo(todoListRef),
		};
	},
};
</script>

<style scoped>
.todos-enter-active,
.todos-leave-active,
.todos-move {
	transition: all 1s;
}
.todos-leave-active {
	position: absolute !important;
}
.todos-enter-from {
	transform: translateX(100%);
	opacity: 0;
}
.todos-leave-to {
	transform: translateX(-100%);
	opacity: 0;
}
</style>
